<template>
    <el-dialog class="ui-distri-dlg" v-model="dialogVisible" :title="dialogTitle" ref="dialog" @opened="init" :beforeClose="beforeClose" @closed="finalThings">
        <div>
            <div class="lb-tip-text">
                <span>当前共出货<span class="lb-success-text">{{ outnum }}</span>件商品，</span>
                <span v-if="badnum > 0">其中 <span class="lb-bad-text">{{ badnum }}</span> 件商品库存不足, </span>
                是否继续配货?
            </div>
            <ul v-if="badnum > 0">
                <li>选择 "继续出货" 库存不足的部分商品可以再次出货.</li>
                <li>选择 "出货并退款" 库存不足的部分将退款给用户.</li>
            </ul>
        </div>
        <template #footer>
            <div class="box-row">
                <div style="flex:1"></div>
                <el-button size="default" type="success" @click="onDistri">继续配货</el-button>
                <el-button size="default" v-if="badnum > 0" type="warning" @click="onDistriAndRefund">配货并退款</el-button>
                <el-button size="default" type="danger" @click="onCancel">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import axios from 'axios';
import { reactive, computed, toRefs } from 'vue-demi';
import { useSocket } from '../../uiframe/services/socket';

export default {
    props:{
        q:Object,
        done: Function,
        id: Number,
        distri:Array,
        bad:Array
    },
    setup:(props)=>{
        const { q,distri,bad } = props;
        const data = reactive({
            dialogVisible: true,
            dialogTitle:'确认配货',
            dialog:null, 
            outnum: distri.length,
            badnum: bad.length
        }),
        methods = {
            onSure:()=>{
                
            },
            onCancel:()=>{
                q.reject({success:false,message:'操作已取消'});
                data.dialogVisible = false;
            },
            init:()=>{

            },
            beforeClose:(next)=>{
                next();
            },
            finalThings:()=>props.done(),
            onDistriAndRefund:()=>{
                useSocket().then(socket=>{
                    socket.rpc('bar.distri',{distri, order_id: props.id, mode:2}).then(res=>{
                        q.resolve(res)
                        data.dialogVisible = false;
                    }).catch(err=>{
                        q.reject(err);
                        data.dialogVisible = false;
                    })
                });
            },
            onDistri:()=>{
                useSocket().then(socket=>{
                    socket.rpc('bar.distri',{distri, order_id: props.id, mode:1}).then(res=>{
                        q.resolve(res)
                        data.dialogVisible = false;
                    }).catch(err=>{
                        q.reject(err);
                        data.dialogVisible = false;
                    })
                });
                //q.resolve({success:true,message:'配货成功'});
                //data.dialogVisible = false;
            }
            
        };
        return {
            ...toRefs(data),
            ...methods
        }
    }
}
</script>
<style lang="scss">
.ui-distri-dlg{
    width:40rem;max-width: 40rem;
    .el-dialog__body{
        padding: 0 2rem 1rem 2rem;
        .lb-tip-text{
            font-size: 1.25rem;
            padding: 1rem 0;
        }
        .lb-success-text{
            color: green;
            padding:0 .25rem;
            font-weight: bold;
        }
        .lb-bad-text{
            color: red;
            padding:0 .25rem;
            font-weight: bold;
        }
        ul{
            line-height: 200%;
        }
    }
}
</style>